<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.parent1 {
				width: 200px;
				height: 200px;
				border: 2px solid #000;
				position: relative;
			}

			.child1 {
				width: 100px;
				height: 100px;
				margin: auto;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				background-color: red;
			}

			.parent2 {
				width: 200px;
				height: 150px;
				border: 2px solid #000;
				display: table-cell;
				vertical-align: middle;
				text-align: center;
			}

			.child2 {
				width: 100px;
				height: 100px;
				display: inline-block;
				background-color: yellow;
			}

			.parent3 {
				width: 200px;
				height: 200px;
				border: 2px solid #000;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.child3 {
				width: 20px;
				height: 20px;
				background-color: red;
				margin-left: 10px;
			}

			.parent4 {
				width: 300px;
				height: 300px;
				border: 2px solid #000;
				position: relative;
			}

			.child4 {
				width: 20px;
				height: 20px;
				margin: auto;
				position: absolute;
				/*设定水平和垂直偏移父元素的50%，
再根据实际长度将子元素上左挪回一半大小*/
				left: 50%;
				top: 50%;
				margin-left: -10px;
				margin-top: -10px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="parent1">
			<div class="child1"></div>
		</div>
		<div class="parent2">
			<div class="child2"></div>
		</div>
		<div class="parent3">
			<div class="child3">1</div>
			<div class="child3">2</div>
			<div class="child3">3</div>
		</div>
		<div class="parent4">
			<div class="child4">1</div>
		</div>
	</body>
</html>
